<template>
	<view class="percent">
		<view class="bfb"><view :style="{width:bfb}"></view></view>
		<view class="bfb-num"> {{bfb}} </view>
	</view>
</template>

<script setup>
	defineProps({
		bfb: {
			type: String,
			default: '0.00%'
		}
	})
</script>

<style scoped lang="scss">
	.percent {
		display: flex;
		align-items: center;
		margin-left: 10px;
		.bfb {
			width: 60px;
			height: 6px;
			background: #DFDFDF;
			border-radius: 146px;
			overflow: hidden;
			view {
				height: 6px;
				background: linear-gradient( 90deg, #FF8508 0%, #FF4847 100%);
			}
		}
		.bfb-num {
			color: #999999;
			font-size: 12px;
			font-weight: 400;
			margin-left: 4px;
			line-height: 12px;
		}
	}
</style>